<template>
<!-- 右上box -->
  <herin-container class="Machine-monitoring" :delay="1" direction="Right" title="三机监测">
    <template #content>
      <div class="Machine-monitoring-box"  v-for="(go,i) in sanjidata" :key="go.i">
        <div class="title">
          <span>{{go.title}}</span><span class="tag" :class="['tag', setclass(go.ztai)]">{{go.ztai}}</span>
        </div>
        <div class="electric-box">
          <span class="electric-current" @click="chosechart(go.name1,i)">
            <span class="electric-current-name" >{{go.name1}}</span>
            <span><span class="electric-current-num" style="color:#00FDFF">{{go.num1}}</span><span class="danwei">A</span></span>
          </span>
          <span class="electric-Voltage"  @click="chosechart(go.name2,i)">
            <span class="electric-Voltage-name">{{go.name2}}</span>
            <span><span class="electric-Voltage-num" style="color:#FFD101">{{go.num2}}</span><span  class="danwei">V</span></span>
          </span>
        </div>
        <div class="chart-title">近24小时{{go.name}}分析</div>
        <div style="color:#ADADAD;font-size:0.75rem">{{go.unit}}</div>
        <div class="chart-box">
          <LineChart
            :chartData="chartSpeedData"
            :text="text"
            unit=""
            :color="['#3D6BBE']"
          />
        </div>
      </div>
    </template>
  </herin-container>
</template>
<script>
import HerinContainer from '@/components/HerinContainer';
import LineChart from '@/components/chart/line/LineChart.vue';

export default {
  components: {
    HerinContainer,
    LineChart
  },
  data() {
    return {
      sanjidata: [
        { title: '转载机', ztai: '运行', name1: '电流', name2: '电压', num1: 90.2, num2: 213, name: '电流', unit: 'A' },
        { title: '破碎机', ztai: '停止', name1: '电流', name2: '电压', num1: 0, num2: 0, name: '电流', unit: 'A' },
        { title: '刮板运输机', ztai: '故障', name1: '电流', name2: '电压', num1: 90.2, num2: 213, name: '电流', unit: 'A' }
      ],
      chartSpeedData: [
        { x: '00:00', y: 20, s: '电流' },
        { x: '06:00', y: 7, s: '电流' },
        { x: '12:00', y: 15, s: '电流' },
        { x: '18:00', y: 20, s: '电流' },
        { x: '24:00', y: 17, s: '电流' }
      ],
      // chartSpeedData2: [
      //   { x: '00:00', y: 5, s: '电压' },
      //   { x: '06:00', y: 7, s: '电压' },
      //   { x: '12:00', y: 15, s: '电压' },
      //   { x: '18:00', y: 20, s: '电压' },
      //   { x: '24:00', y: 17, s: '电压' }
      // ],
      chamgeindex: 0,
      text: ['电流']
    };
  },
  computed: {
    // chartSpeedDataa: {
    //   get: function() { return this.this.chartSpeedData; },
    //   set: function() { }
    // }
    // unit() {
    //   return this.sanjidata[this.chamgeindex].unit;
    // }
  },
  mounted() {
  },
  methods: {
    setclass(val) {
      if (val === '运行') {
        return 'green';
      } else if (val === '停止') {
        return 'lightGrey';
      } else {
        return 'red';
      }
    },
    chosechart(val, index) {
      this.chamgeindex = index;
      this.sanjidata.forEach((item, indexi) => {
        if (val === '电流' && index === indexi) {
          this.sanjidata[index].name = '电流';
          this.sanjidata[index].unit = 'A';
          this.text.splice(0, 1);
          this.text.push(this.sanjidata[index].name);
        } else if (val === '电压' && index === indexi) {
          this.sanjidata[index].name = '电压';
          this.sanjidata[index].unit = 'V';
          this.text.splice(0, 1);
          this.text.push(this.sanjidata[index].name);
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.Machine-monitoring{
  color: #D8D8D8;
  margin-bottom: .625rem;
  .Machine-monitoring-box{
    .title{
      margin-bottom: .625rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: .875rem;
      .tag{
        display: inline-block;
        margin-left: 0.625rem;
        width: 3.75rem;
        height: 1rem;
        text-align: center;
        font-size: $auxiliaryText;
      }
    }
    .green {
      color: $green;
      background-color: rgba($color: $green, $alpha: 0.2);
    }
    .red {
      color: $red;
      background-color: rgba($color: $red, $alpha: 0.2);
    }
    .lightGrey {
      color: $lightGrey;
      background-color: rgba($color: $lightGrey, $alpha: 0.2);
    }
    .active {
      background-color: rgba(255, 255, 255, 0.4);
    }
    .electric-box{
      height:3.3125rem;
      border-radius: .3125rem;
      display: flex;
      justify-content: space-between;
      .electric-current,.electric-Voltage{
        width:10rem;
        background: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: .25rem;
      }
    }
    .chart-title{
      font-size: .75rem;
      color: #D8D8D8;
      margin:.625rem 0rem;
    }
    .chart-box{
      height: 6.875rem;
    }
  }
}
.danwei{
  color:#8D8D8D;
  font-size:0.75rem;
  margin-left:0.625rem
}

</style>
